import {
  Bubble,
  Conversations,
  Prompts,
  Sender,
  Suggestion,
  ThoughtChain,
  XProvider,
} from '@ant-design/x';
import { Card, Divider, Flex, Radio, Typography } from 'antd';
import React from 'react';

import {
  AlipayCircleOutlined,
  BulbOutlined,
  CheckCircleOutlined,
  GithubOutlined,
  LoadingOutlined,
  SmileOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { ConfigProviderProps, GetProp } from 'antd';
import ConversationList from './Components/ConversationList';
import ChatWindow from './Components/ChatWindow';

export default () => {
  const [value, setValue] = React.useState('');
  const [direction, setDirection] =
    React.useState<GetProp<ConfigProviderProps, 'direction'>>('ltr');

  return (
    <>
      <Card
        style={{
          height: '100vh', // 设置 Card 高度为视口高度
          boxSizing: 'border-box', // 防止 padding 导致溢出
        }}
      >
        <XProvider direction={direction}>
          <Flex style={{ height: '100%' }} >
            {/* 左侧：对话列表 */}
            <ConversationList />

            {/* 分割线 */}
            <Divider type="vertical" style={{ height: '100%' }} />

            {/* 右侧：聊天窗口 */}
            <ChatWindow />
          </Flex>
        </XProvider>
      </Card>

    </>
  );
};